<template>
<div class="text-white content w-full" style="height:1200px">
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-8 h-full gap-2" style="padding-top:60px;">
            <ServeMap ></ServeMap> 
      </div>
    </BorderBox1>
  </div>
  <div class="text-white content w-full" style="height:660px">
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-5 h-full gap-2" style="padding-top:100px;padding:30px">
       
        <div class="bottom grid row-span-4 grid-cols-4 gap-2 h-full">
          <div class="left col-span-1 pb-4">
            <FWZTop ></FWZTop>
          </div>
          <div class="left col-span-1  pb-4" style="padding-left:0">
            <JGSTop
             
            ></JGSTop>
          </div>
          <div class="middle col-span-1 pb-4">
            <UserTop
            
            ></UserTop>
          </div>
          <div class="middle col-span-1  pb-4">
            <BZTop
             
            ></BZTop>
          </div>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>

<script setup>

import { BorderBox1} from '@kjgl77/datav-vue3'
import { ref } from 'vue'
import { getAllUserData } from '@/api/memberManager'

import FWZTop from '@/view/dataAnalysis/model2/FangAnCount.vue'

import JGSTop from '@/view/dataAnalysis/model2/JGSCount.vue'
import UserTop from '@/view/dataAnalysis/model2/UserCount.vue'
import MainTitle from '@/view/allUser/components/mainTitle.vue'
import ServeMap from '@/view/dataAnalysis/model2/StationMapModel.vue'
import BZTop from '@/view/dataAnalysis/model2/stationBZTop.vue'
const data = ref({})
const LeftBarData = ref([])
const RightBarData = ref([])
const illList = ref([])
const line = ref({})
const isShowMap = ref(false)
const isShow = ref(false)
const isShowPie = ref(false)
const isShowHistogram = ref(false)
const isShowLine = ref(false)
const isShowBar = ref(false)
const isShowBZLine = ref(false)
const registrants_rank = ref([])
const hierarchy_pie = ref([])
const plan_histogram = ref({})
const plan_rank = ref([])
const service_histogram = ref({})
const BZlineData=ref({})
const initPage = async() => {
  const res = await getAllUserData()
  data.value = res.data
  LeftBarData.value = data.value.age_pie
  RightBarData.value = data.value.sex_pie
  data.value.disease_rank.sort((a,b)=>b.count - a.count)
  illList.value = data.value.disease_rank
  illList.value.forEach((item, index) => {
    // 获取illList每一项count的总和
    const sum = illList.value.reduce((prev, cur) => {
      return prev + cur.count
    }, 0)
    // 计算每一项count的百分比
    item.percent = ((item.count / sum) * 100).toFixed(2) + '%'
    if (item.count.toString().length > 4) {
      var countWan = item.count.toString()
      countWan = countWan.substring(0, countWan.length - 4) + '万'
      
      item.count = countWan
    }
  })
  line.value = data.value.add_line
  if (line.value) {
    isShow.value = true
  }
  registrants_rank.value = data.value.registrants_rank
  hierarchy_pie.value = data.value.hierarchy_pie
  if (hierarchy_pie.value) {
    isShowPie.value = true
  }
  plan_histogram.value = data.value.plan_histogram
  if (plan_histogram.value) {
    isShowLine.value = true
  }
  plan_rank.value = data.value.plan_rank
  // BZlineData.value ={num100: 130,num80:130,num60: 20,num40:130,num20: 0,num0: 110}
  BZlineData.value =data.value.fanganpercent
  if (BZlineData.value) {
    isShowBZLine.value = true
  }
  service_histogram.value = data.value.service_histogram
  if (service_histogram.value) {
    isShowHistogram.value = true
  }
   

  if(LeftBarData.value?.length && RightBarData.value?.length){
    isShowBar.value = true
  }
}

initPage()
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
</style>
